<template lang="pug">
.tab-container
  el-tabs(v-model='activeName' style='margin-top:15px;')
    el-tab-pane(:key='"DETAIL"' label='案件详情' name='DETAIL')
      keep-alive
        cases-detail(v-if='activeName=="DETAIL"' :type='DETAIL')
    el-tab-pane(:key='"EVIDENCE"' label='证据' name='EVIDENCE')
      keep-alive
        evidence-list(v-if='activeName=="EVIDENCE"' :type='EVIDENCE')
</template>

<script>
import CasesDetail from './components/CasesDetail'
import EvidenceList from './components/EvidenceList'

export default {
  name: 'Tab',
  components: { CasesDetail, EvidenceList },
  data() {
    return {
      tabMapOptions: [
        { label: '案件详情', key: 'DETAIL' },
        { label: '证据', key: 'EVIDENCE' }
      ],
      activeName: 'DETAIL',
      createdTimes: 0
    }
  },
  watch: {
    activeName(val) {
      // this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    }
  }
}
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
